<template>
  <div class="wxb-photos">
    <el-dialog :modal-append-to-body="false" :visible.sync="showPhoto" width="870px" center :before-close="handleClose" :modal="false">
      <div slot="title" class="wxb-photos-title">
        <span v-if="type == 1">
          当前已选张数
          <span style="color: red;font-weight: bold">{{ selectedPhotos.length }}</span> 张
        </span>
        <span v-if="type == 2">上传图片</span>
      </div>

      <div v-loading="loading" style="width: 840px;margin-top: -30px;margin-left: -5px;height: 526px">
        <!--素材列表-->
        <div v-if="type == 1">
          <div style="width: 120px;float: left">
            <div class="photo-photo-cat-box">
              <el-button type="primary" @click="AddPhoto" class="photo-upload-btn">上传素材</el-button>
              <div class="photo-photo-cat">
                <ul>
                  <li class="text-over" @click="selectedCat(v.category_id)" :class="{ 'select-cat': selectedCatId == v.category_id }" v-for="(v,k) in cats" :key="k">{{ v.name }}</li>
                </ul>
              </div>
            </div>
          </div>
          <div style="width: 720px;float: right">
            <div class="photo-item-box">
              <div class="photo-item" @click="selected(val)" :class="{ 'photos-selected': selectedPhotos.indexOf(val.photo) > -1 }" v-for="(val,key) in datas.list" :key="key">
                <img width="30" height="30" class="photos-selected-icon" src="../../assets/images/icon_selected.png" />
                <el-image style="width: 100px; height: 100px" :src="val.photo"></el-image>
              </div>
            </div>
            <div style="clear: both"></div>
            <div>
              <el-pagination style="width: 100%;text-align:right" background :page-size="datas.limit" @current-change="getRes" layout="total,prev, pager, next" :total="datas.count"></el-pagination>
            </div>
          </div>
        </div>
        <!--上传素材-->
        <div v-if="type == 2">
          <el-form ref="form" label-width="100px" style="padding-top: 20px">
            <el-form-item label="素材分类：" v-loading="catAddloading">
              <el-col :span="6">
                <el-select v-model="add_all_category_id" placeholder="请选择">
                  <el-option v-for="item in cats" :key="item.category_id" :label="item.name" :value="item.category_id"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6" :offset="1" v-if="catAdd">
                <el-input v-model="addCatTitle" placeholder="请输入分类名称"></el-input>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-button type="primary" v-if="catAdd" @click="createCat">提交分类</el-button>
                <el-button type="primary" v-if="catAdd == false" @click="catAdd = true, addCatTitle = ''">添加分类</el-button>
              </el-col>
              <el-col :span="2">
                <el-button v-if="catAdd" @click="catAdd = false, addCatTitle = ''">取消</el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="上传图片" style="margin-top: 20px">
              <el-upload class="wxb-uploadphotos" name="image" :on-exceed="tisLimit" ref="uploadphoto2" :limit="multi ? 10 : 1" :data="getParam()" list-type="picture-card" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :action="getaction()">
                <i class="el-icon-upload"></i>
              </el-upload>
              <p class="wxb-form-tips">单次最多可以选择{{ multi ? 10 : 1 }}张图片</p>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button v-if="type == 2" @click="type = 1">返回列表</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "./../../util/common.js";
import {
  geCattCountIndex,
  geIndex,
  createCat,
} from "../../request/api/setting/resource";

export default {
  name: "Photos",
  props: {
    showPhoto: { default: false },
    multi: { default: false },
  },
  data() {
    return {
      imageUrl: "",
      photo: "",
      datas: [],
      loading: false,
      cats: [],
      selectedCatId: -1,
      add_all_category_id: -1,
      selectedPhotos: [],
      type: 1, //1 素材列表 2上传素材
      catAdd: false,
      addCatTitle: "",
      catAddloading: false,
    };
  },
  created() {
    this.getCatList();
    this.getRes();
  },
  methods: {
    handleAvatarSuccess(res) {
      this.page = 1;
      this.selectedCatId = this.add_all_category_id;
      this.selected({
        photo: res.data.img_url,
      });
      this.getRes();
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.warning("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    submit() {
      let photo = "";
      if (this.multi) {
        photo = this.selectedPhotos;
      } else {
        let photoa = this.selectedPhotos[0] ? this.selectedPhotos[0] : "";
        photo = JSON.parse(JSON.stringify(photoa));
      }
      this.$emit("input", false);
      this.$emit("select", photo);
      this.selectedPhotos = [];
    },
    createCat() {
      this.catAddloading = true;
      createCat({
        name: this.addCatTitle,
      })
        .then(() => {
          this.catAddloading = false;
          this.getCatList();
          this.catAdd = false;
          this.addCatTitle = "";
        })
        .catch(() => {
          this.catAddloading = false;
        });
    },
    //是否选中
    selected(val) {
      let index = this.selectedPhotos.indexOf(val.photo);
      if (index > -1) {
        this.selectedPhotos.splice(index, 1);
      } else {
        if (this.multi == false) {
          this.selectedPhotos = [];
        }
        this.selectedPhotos.push(val.photo);
      }
    },

    selectedCat(cat_id) {
      this.selectedCatId = cat_id;
      this.getRes();
    },

    handleClose() {
      this.$emit("input", false);
    },

    getRes(page = 1) {
      this.loading = true;
      geIndex({
        category_id: this.selectedCatId,
        page: page,
      })
        .then((res) => {
          this.datas = res;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    async getCatList() {
      this.cats = await geCattCountIndex();
    },

    AddPhoto() {
      if (this.$refs.uploadphoto2) {
        this.$refs.uploadphoto2.clearFiles();
      }
      this.type = 2;
      this.addPhoto = true;
    },

    tisLimit() {
      let msg = `单次最大上传${this.multi ? 10 : 1}张图片`;
      this.$message(msg);
    },

    okAddPhoto() {
      this.addPhoto = false;
      this.getCatList();
      this.getRes(1);
    },
    getaction() {
      return adminApi.admin_api + "/imageUpload";
    },
    getParam() {
      return {
        token: this.$store.getters.token,
        en_token: encodeURI(this.$store.getters.token),
        category_id:
          this.add_all_category_id <= -1 ? 0 : this.add_all_category_id,
      };
    },
  },
};
</script>


<style>
.wxb-uploadphotos .el-upload--picture-card {
  width: 100px;
  height: 100px;
}

.wxb-photos .wxb-photos-title {
  border-bottom: 1px solid #e1e1e1 !important;
  height: 33px;
  line-height: 15px;
}
.wxb-photos .photo-photo-cat-box {
  height: 526px;
  margin-top: 10px;
}
.wxb-photos .photo-photo-cat-box .photo-upload-btn {
  height: 40px;
  width: 100px;
  font-size: 14px;
}
.wxb-photos .photo-photo-cat-box .photo-photo-cat {
  height: 456px;
  overflow-y: auto;
  margin-top: 10px;
}
.wxb-photos .photo-photo-cat-box .photo-photo-cat ul {
  width: 100px;
  border: 1px #f5f5f5 solid;
}
.wxb-photos .photo-photo-cat-box .photo-photo-cat li {
  cursor: pointer;
  height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 0 10px;
}
.wxb-photos .photo-photo-cat-box .photo-photo-cat .select-cat {
  background-color: #007eff;
  color: #ffffff;
  font-weight: bold;
}
.wxb-photos .photo-item-box {
  height: 524px;
}
.wxb-photos .photo-item-box .photo-item {
  margin: 8px;
  border: 2px solid #f5f5f5;
  cursor: pointer;
  float: left;
  position: relative;
}
.wxb-photos .photo-item-box .photo-item .photos-selected-icon {
  position: absolute;
  right: 0;
  display: none;
  z-index: 999;
}
.wxb-photos .photo-item-box .photos-selected {
  border: 2px solid var(--main-color);
}
.wxb-photos .photo-item-box .photos-selected .photos-selected-icon {
  display: block;
}
.wxb-photos .photo-item-box .photo-page {
  width: 100%;
  text-align: center;
}

.el-dialog__close,
.el-icon,
.el-icon-close {
  position: relative;
}
</style>
